<template>
  <div class="app-container">
    <div class="operation">
      <el-button
        type="primary"
        size="small"
        @click="handleForm(null,null)"
      >
        新增菜单
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="menuList"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      border
      empty-text="暂无数据"
      style="width: 100%"
      max-height="650"
    >

      <el-table-column
        label="菜单名称"
        align="center"
        width="150"
        prop="display_name"
      >
      </el-table-column>
      <el-table-column
        label="菜单KEY"
        align="center"
        width="150"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="是否为菜单"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.is_menu"
            class="span-success"
          >是</span>
          <span
            v-else
            class="span-danger"
          >否</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="pid"
        label="父级ID"
        align="center"
        width="100"
      >
      </el-table-column> -->
      <!-- <el-table-column
        prop="level"
        label="等级"
        align="center"
        width="100"
      >
      </el-table-column> -->
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="component"
        label="组件名称"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column
        label="是否隐藏"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-if='scope.row.hidden===false'
            type="success"
            size="small"
          >显示</el-button>
          <el-button
            v-else
            type="danger     "
            size="small"
          >隐藏</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="updated_at"
        label="修改时间"
        align="center"
        width="180"
      ></el-table-column>

      <el-table-column
        align="center"
        label="操作"
        prop="id"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleForm(null,scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- new menu or Edit -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑菜单':'新增菜单'"
    >
      <el-form
        :model="menuObject"
        :rules="rules"
        ref="menuObjectRef"
        label-width="120px"
      >
        <el-form-item label="父级菜单">
          <el-input
            v-model="parentNode.display_name"
            readonly="readonly"
            placeholder="请选择父级菜单，不选则为顶级菜单"
            @click.native="taggleTree"
          >
          </el-input>

          <el-tree
            v-show="showTree"
            empty-text="暂无数据"
            :expand-on-click-node="false"
            :data="menuList"
            :props="defaultProps"
            node-key="id"
            ref="menuTree"
            @node-click="handleNodeClick"
            class="input-tree"
          >
          </el-tree>
        </el-form-item>
        <el-form-item
          label="菜单名称"
          prop="display_name"
        >
          <el-input
            v-model="menuObject.display_name"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="菜单KEY"
          prop="name"
        >
          <el-input
            v-model="menuObject.name"
            placeholder="请输入菜单KEY"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="组件名称"
          prop="component"
        >
          <el-input
            v-model="menuObject.component"
            placeholder="请输入组件名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
        >
          <el-input
            v-model="menuObject.sort"
            placeholder="请输入排序号 "
          ></el-input>
        </el-form-item>
        <el-form-item
          label="路由"
          prop="path"
        >
          <el-input
            v-model="menuObject.path"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为菜单">
          <el-switch v-model="menuObject.is_menu"></el-switch>
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-switch v-model="menuObject.hidden"></el-switch>
        </el-form-item>
      </el-form>
      <div style="text-align:right">
        <el-button
          type="danger"
          @click="dialogVisible=false"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="confirmMenu('menuObjectRef')"
        >
          提交
        </el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import paginAtion from '@/components/Pagination'
import { addPermission, delPermission, getPermissionListFromCurrentUser } from '@/api/permission'
export default {
  name: 'menuIndex',
  components: {
    paginAtion
  },
  data() {
    return {
      menuList: [],
      loading: true,
      baseObject: {
        name: '',
        display_name: '',
        component: '',
        sort: 50,
        path: '',
        hidden: false,
        is_menu: true,
        pid: 0,
        level: 0
      },
      menuObject: {},
      dialogVisible: false,
      dialogType: 'edit',
      showTree: false,
      defaultProps: {
        id: 'id',
        label: 'display_name',
        children: 'children'
      },
      pid: 0,
      parentNode: {},
      level: 0,
      rules: {
        display_name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符之间', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入菜单KEY', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符之间', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组件名称', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ]
      },
      currentKey: "",
      highlightCurrent: true
    }
  },
  created() {
    this.init()
    this.loading = false
  },
  methods: {
    isShow(val) {
      return val ? '显示' : '隐藏'
    },
    handleForm(index, row) {
      this.dialogVisible = true
      this.showTree = false
      this.parentNode = {}
      if (row !== null) {
        this.$nextTick(() => {
          const parentObject = this.$refs.menuTree.getNode(row.pid)
          this.parentNode = {}
          if (parentObject !== null) {
            this.parentNode = parentObject.data
          }
          this.menuObject = row
          this.pid = row.pid
          this.dialogType = 'edit'
        });
      } else {
        this.$nextTick(() => {
          this.dialogType = 'new'
          this.menuObject = this.baseObject
        })
      }
    },
    confirmMenu(menuObjectRef) {
      this.menuObject.pid = this.pid
      this.menuObject.level = this.level
      this.$refs[menuObjectRef].validate((valid) => {
        if (valid) {
          addPermission(this.menuObject)
            .then(
              res => {
                this.dialogVisible = false
                this.$message({ message: '操作成功', type: 'success' })
                this.init()
              }
            )
            .catch(
              err => {
                console.log(err)
              }
            )
        } else {
          return false
        }
      })
    },
    handleNodeClick(data, node) {
      this.menuObject.pname = data.name
      this.pid = data.id
      this.level = data.level + 1
      this.parentNode = node.data
      this.showTree = false
    },
    handleDelete(row) {
      this.$confirm('此操作将删除该菜单及其关联的菜单权限，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(
          () => {
            delPermission({ id: row.id })
              .then(
                res => {
                  this.dialogVisible = false
                  this.$message({ message: '操作成功', type: 'success' })
                  this.init()
                }
              )
              .catch(
                err => {
                  console.log(err)
                }
              )
          }
        )
        .catch(() => {
          console.log('已取消')
        })

    },
    taggleTree() {
      if (this.showTree === false) {
        this.showTree = true
      } else {
        this.showTree = false
      }
    },
    init() {
      this.menuObject = this.baseObject
      //获取所有权限列表
      getPermissionListFromCurrentUser()
        .then(
          res => {
            this.menuList = res
          }
        )
    }
  }
}
</script>
<style scoped>
.operation {
  padding: 10px 0;
}
.span-success {
  background-color: #67c23a;
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
}
.span-danger {
  background-color: #f56c6c;
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
}
</style>
